<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="vue.js"></script>


<body>

    <div id="app">
        <hd-news  @sum="total" :lists="goods" ></hd-news>
        总计:{{totalPrice}}
    </div>

<script type="text/x-template" id="hdNews">
<table border="1" width="90%">
    <tr>
        <th>商品名称</th>
        <th>商品数量</th>
        <th>商品价格</th>
    </tr>
    <tr v-for="(v,k) in lists">
        <td>{{v.title}}</td>
        <td>{{v.price}}</td>
        <td>
            <input type="text" v-model="v.num" @blur="sum">
        </td>
    </tr>
</table>

</script>
<script>
    var data={
        news:[
            {title:'前端申'},
            {title:'后端君'}

        ]
    };

    var hdNews={
        template:'#hdNews',
        props:['lists'],
        data(){
            return{
                
            };

        },
        methods:{
            del(k){
                this.news.splice(k,1);
            },
            sum(){
                this.$emit('sum');
            }
        }
    };
    var app=new Vue({
        el:'#app',
        components:{
          hdNews:hdNews
        },
        mounted(){
            this.total();
        },
        data: {
            totalPrice:0,
            goods:[
                {title:'iphone7',price:100,num:2},
                {title:'iphone5',price:100,num:1},
                {title:'iphone4',price:100,num:1},
                {title:'iphone8',price:100,num:1},
                {title:'iphone9',price:100,num:1},
            ]
        },
        methods:{
            total(){
                this.totalPrice=0;
                this.goods.forEach((v)=>{
                    this.totalPrice+=v.num*v.price;
                })
            }
        }



    });

</script>
</body>
</html>